<template>
  <div class="business-role-container">
    <HeaderIndex title="商业角色" />
    <div class="business-role-info">
      <h3>
        {{ $route.query.humanName }}的商业角色<span>{{ getTotalLen() }}</span>
      </h3>
      <div class="br-con">
        <div class="br-con-title" @click="handleShowList('legal')">
          <div class="br-list-left">
            <span>担任法定代表人</span>
            <span>{{ legalList.length }}</span>
          </div>
          <div class="br-list-right" :class="{ 'rotate-active': isShowLegal }">
            <em class="iconfont icon-youjiantou" />
          </div>
        </div>
        <div
          class="br-con-list"
          :class="{ 'br-con-list-padding': legalList.length }"
          v-show="isShowLegal"
        >
          <ul class="gs-details">
            <li
              v-for="(legalItem, index) in legalList"
              :key="index"
              @click="handleEnterpriseInfoQuery(legalItem.name, legalItem.cid)"
            >
              <div class="left-info">
                <div class="left-info-t">
                  <div class="order-number">{{ index + 1 }}</div>
                  <div class="left-info-t-gs">
                    <h3>{{ legalItem.name }}</h3>
                    <p>
                      <span
                        >省份：{{ legalItem.base | provinceConversion }}</span
                      >
                      <span>经营状态：{{ legalItem.regStatus }}</span>
                    </p>
                  </div>
                </div>
                <div class="left-info-b">
                  <p>注册资本：{{ legalItem.regCapital | isEmptyData }}</p>
                  <p>成立日期：{{ legalItem.estiblishTime | dateFormat }}</p>
                </div>
              </div>
              <div class="right-icon">
                <em class="iconfont icon-youjiantou" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="br-con">
        <div class="br-con-title" @click="handleShowList('office')">
          <div class="br-list-left">
            <span>担任高管的公司列表</span>
            <span>{{ officeList.length }}</span>
          </div>
          <div class="br-list-right" :class="{ 'rotate-active': isShowOffice }">
            <em class="iconfont icon-youjiantou" />
          </div>
        </div>
        <div
          class="br-con-list"
          :class="{ 'br-con-list-padding': officeList.length }"
          v-show="isShowOffice"
        >
          <ul class="gs-details">
            <li
              v-for="(officeItem, index) in officeList"
              :key="index"
              @click="
                handleEnterpriseInfoQuery(officeItem.name, officeItem.cid)
              "
            >
              <div class="left-info">
                <div class="left-info-t">
                  <div class="order-number">{{ index + 1 }}</div>
                  <div class="left-info-t-gs">
                    <h3>{{ officeItem.name }}</h3>
                    <p>
                      <span
                        >法人：<span
                          class="page-link-color"
                          @click.stop="
                            handleBusinessRole(
                              officeItem.name,
                              officeItem.legalPersonName
                            )
                          "
                          >{{ officeItem.legalPersonName }}</span
                        ></span
                      >
                      <span>经营状态：{{ officeItem.regStatus }}</span>
                    </p>
                  </div>
                </div>
                <div class="left-info-b">
                  <p>省份：{{ officeItem.base | provinceConversion }}</p>
                  <p>注册资本：{{ officeItem.regCapital | isEmptyData }}</p>
                  <p>成立日期：{{ officeItem.estiblishTime | dateFormat }}</p>
                </div>
              </div>
              <div class="right-icon">
                <em class="iconfont icon-youjiantou" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="br-con">
        <div class="br-con-title" @click="handleShowList('holder')">
          <div class="br-list-left">
            <span>担任股东的公司列表</span>
            <span>{{ holderList.length }}</span>
          </div>
          <div class="br-list-right" :class="{ 'rotate-active': isShowHolder }">
            <em class="iconfont icon-youjiantou" />
          </div>
        </div>
        <div
          class="br-con-list"
          :class="{ 'br-con-list-padding': holderList.length }"
          v-show="isShowHolder"
        >
          <ul class="gs-details">
            <li
              v-for="(holderItem, index) in holderList"
              :key="index"
              @click="
                handleEnterpriseInfoQuery(holderItem.name, holderItem.cid)
              "
            >
              <div class="left-info">
                <div class="left-info-t">
                  <div class="order-number">{{ index + 1 }}</div>
                  <div class="left-info-t-gs">
                    <h3>{{ holderItem.name }}</h3>
                    <p>
                      <span
                        >法人：<span
                          class="page-link-color"
                          @click.stop="
                            handleBusinessRole(
                              holderItem.name,
                              holderItem.legalPersonName
                            )
                          "
                          >{{ holderItem.legalPersonName }}</span
                        ></span
                      >
                      <span>经营状态：{{ holderItem.regStatus }}</span>
                    </p>
                  </div>
                </div>
                <div class="left-info-b">
                  <p>省份：{{ holderItem.base | provinceConversion }}</p>
                  <p>注册资本：{{ holderItem.regCapital | isEmptyData }}</p>
                  <p>认缴出资额：{{ holderItem.subscribed | isEmptyData }}</p>
                  <p>持股比例：{{ holderItem.percent | isEmptyData }}</p>
                  <p>成立日期：{{ holderItem.estiblishTime | dateFormat }}</p>
                </div>
              </div>
              <div class="right-icon">
                <em class="iconfont icon-youjiantou" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRolesInfo } from "@/api";
import { Toast, jumpPage } from "@/utils";
import HeaderIndex from "@/components/header";
export default {
  name: "BusinessRole",
  components: {
    HeaderIndex,
  },
  data() {
    return {
      isShowHolder: false, //是否显示担任股东的公司列表
      isShowLegal: false, //是否担显示任法定代表人
      isShowOffice: false, //是否显示担任高管的公司列表
      holderList: [], //担任股东的公司列表
      legalList: [], //担任法定代表人
      officeList: [], //担任高管的公司列表
    };
  },
  async created() {
    try {
      Toast.startLoading();

      //路由参数解构
      const { companyName, humanName } = this.$route.query;

      //获取商业角色信息数据
      const {
        holderList = [],
        legalList = [],
        officeList = [],
      } = (await getRolesInfo({
        companyName,
        humanName,
      })) || {};

      this.holderList = holderList;
      this.legalList = legalList;
      this.officeList = officeList;

    } finally {
      Toast.closeLoading();
    }
  },
  methods: {
    /**
     * 获取总数长度
     */
    getTotalLen() {
      return (
        this.holderList.length + this.legalList.length + this.officeList.length
      );
    },

    /**
     * 显示对应的列表
     * @param {*} type 列表类型
     */
    handleShowList(type) {
      switch (type) {
        case "legal":
          this.isShowLegal = !this.isShowLegal;
          break;
        case "office":
          this.isShowOffice = !this.isShowOffice;
          break;
        case "holder":
          this.isShowHolder = !this.isShowHolder;
          break;
      }
    },

    /**
     * 进入企业详情信息页面
     * @param {*} companyName 公司名称
     * @param {*} id
     */
    handleEnterpriseInfoQuery(companyName, id) {
      sessionStorage.setItem("isGoBack", false);
      jumpPage(this, "EnterpriseInfoQuery", {
        companyName,
        id,
      });
    },

    /**
     * 进入商业角色页面
     * @param {*} companyName 公司名称
     * @param {*} humanName 人名
     */
    handleBusinessRole(companyName, humanName) {
      jumpPage(this, "BusinessRole", {
        companyName,
        humanName,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@/assets/styles/businessRole/index.less");
</style>